<template>
    <div class="home" :style="{
        height:
            this.$store.state.system.isFullScreen === false
                ? 'calc(100vh - 60px)'
                : '100vh',
    }">
        <div class="Title">
            <div> {{ SystemNames }}</div>
        </div>
        <div class="Conten">
            <div class="Conten_left">
                <div class="Absolute_left_A">
                    <div class="Absolute_left_A_top">
                        <div class="Absolute_left_A_top_text">站点信息</div>
                    </div>
                    <div class="box-1">
                        <box_1 />
                    </div>

                </div>
                <div class="Absolute_left_B">
                    <div class="Absolute_left_A_top">
                        <div class="Absolute_left_A_top_text">设备基本信息</div>
                    </div>
                    <div class="box-1">
                        <box_2 />
                    </div>
                </div>
                <div class="Absolute_left_C">

                    <div class="Absolute_left_A_top">
                        <div class="Absolute_left_A_top_text">实时状态信息</div>
                    </div>

                    <div class="box-1">
                        <box_3 />
                    </div>


                </div>
            </div>
            <div class="Conten_centre">
                
                <div class="Conten_centre_top" style="color: white;">
                    <div class="Conten_centre_top_text"> 设备安装位置</div>
                </div>
                <div class="Conten_centre_tu">
                    <div class="Conten_centre_tu_1">
                        <Scalelmg_1 />
                    </div>
                    <div class="Conten_centre_tu_2">
                        <Scalelmg_2 />
                    </div>
                </div>
            </div>
            <div class="Conten_right">
                <div class="Absolute_left_A">

                    <div class="Absolute_left_A_top">
                        <div class="Absolute_left_A_top_text">设备报警统计</div>
                    </div>

                    <div>
                        <box_4 />
                    </div>
                </div>
                <div class="Absolute_left_B">
                    <div class="Absolute_left_A_top">
                        <div class="Absolute_left_A_top_text">设备诊断信息</div>
                    </div>

                    <div>
                        <box_5 />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import box_1 from '../BaLaSuCompoents/box_1.vue'
import box_2 from '../BaLaSuCompoents/box_2.vue'
import box_3 from '../BaLaSuCompoents/box_3.vue'
import Scalelmg_1 from '../BaLaSuCompoents/Scalelmg_1.vue'
import Scalelmg_2 from '../BaLaSuCompoents/Scalelmg_2.vue'
import box_4 from '../BaLaSuCompoents/box_4.vue'
import box_5 from '../BaLaSuCompoents/box_5.vue'

import { WbeTitleList } from "../../https/api/user"
export default {
    name: 'HomeView',
    components: {
        box_1, box_2, box_3, Scalelmg_1, Scalelmg_2, box_4, box_5
    },
    data() {
        return {
            SystemNames: "",
        }
    },
    mounted() {
        this.QueryWedTitleList();
    },
    methods: {
        QueryWedTitleList() {
            WbeTitleList().then((res) => {
                console.log("获取标题", res);
                if (res) {
                    this.SystemNames = res[0].SystemNames;

                }
            });
        },
    }
}
</script>

<style lang="less">
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.home {
    width: 100%;
    height: 100%;
    // height: 100vh;
    background-color: rgb(0, 10, 65);
    overflow: hidden;

    .Title {
        width: 100%;
        height: 10%;
        // background-color: forestgreen;
        background-image: url('../../assets/BaLaSu/检测系统.png');
        background-size: 100% 100%;
        color: white;
        line-height: 9vh;
        font-weight: 900;
        font-size: 30px;
        letter-spacing: 4px;

        >div {
            text-align: center;
            background: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(77, 143, 241));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    }

    .Conten_centre_top_text {
        width: 100%;
        height: 41.89px;
        text-align: left;
        margin-left: 5%;
        line-height: 41.89px;
        font-weight: 900;
    }

    .Absolute_left_A_top_title_text {
        width: 100%;
        height: 36.91px;
        text-align: left;
        //   margin-left: 10%;
        line-height: 36.91px;

    }

    .Conten {
        height: 89%;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        // overflow: hidden;

        .Conten_left {
            width: 22%;
            // height: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .Absolute_left_A {
                width: 100%;
                height: 32.5%;
                background-color: rgb(3, 13, 53);

                >div:nth-child(1) {
                    color: white;
                    width: 100%;
                    height: 13%;
                    background-image: url('../../assets/BaLaSu/Item_sanjiao.png');
                    background-size: 100% 100%;
                    overflow: hidden;
                }
            }

            .Absolute_left_B {
                width: 100%;
                height: 25%;
                background-color: rgb(3, 13, 53);
                // border: 1px solid red;


                >div:nth-child(1) {
                    color: white;
                    width: 100%;
                    height: 17%;
                    background-image: url('../../assets/BaLaSu/Item_sanjiao.png');
                    background-size: 100% 100%;
                    overflow: hidden;
                }

                >div:nth-child(2) {
                    height: 83%;
                }
            }

            .Absolute_left_C {
                width: 100%;
                height: 41.5%;
                background-color: rgb(3, 13, 53);
                // border: 1px solid red;

                >div:nth-child(1) {
                    color: white;
                    width: 100%;
                    height: 10%;
                    background-image: url('../../assets/BaLaSu/Item_sanjiao.png');
                    background-size: 100% 100%;
                    overflow: hidden;
                }

                >div:nth-child(2) {
                    height: 90%;
                }
            }
        }

        .Absolute_left_A_top_text {
            width: 100%;
            height: 36.91px;
            text-align: left;
            margin-left: 10%;
            line-height: 36.91px;
            font-weight: 900;
        }

        .Conten_centre {
            width: 53%;

            .Conten_centre_top {
                width: 100%;
                height: 5%;
                background-image: url(../../assets/BaLaSu/图纸位置.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                text-align: left;
                line-height: 40px;

            }

            .Conten_centre_tu {
                width: 100%;
                height: 96%;
                // border: 1px solid red;


                .Conten_centre_tu_1 {
                    width: 100%;
                    height: 75%;


                }

                .Conten_centre_tu_2 {
                    width: 100%;
                    height: 25%;


                }
            }


        }

        .Conten_right {
            width: 22%;
            height: 100%;

            .Absolute_left_A {
                width: 100%;
                height: 35%;
                // border: 1px solid salmon;
                background-color: rgb(3, 13, 53);

                >div:nth-child(1) {
                    color: white;
                    width: 100%;
                    height: 12%;
                    background-image: url('../../assets/BaLaSu/Item_sanjiao.png');
                    background-size: 100% 100%;
                }

                >div:nth-child(2) {
                    width: 100%;
                    height: 88%;
                }
            }

            .Absolute_left_B {
                width: 100%;
                height: 65%;
                // border: 1px solid violet;
                background-color: rgb(3, 13, 53);
                // border: 1px solid red;

                >div:nth-child(1) {
                    color: white;
                    width: 100%;
                    height: 7%;
                    background-image: url('../../assets/BaLaSu/Item_sanjiao.png');
                    background-size: 100% 100%;
                    overflow: hidden;
                }

                >div:nth-child(2) {
                    width: 100%;
                    height: 93%;
                }
            }
        }
    }
}

.box-1 {
    width: 100%;
    height: 90%;
    // border: 1px solid red;

}
</style>